<template>
    <div>
        <!-- 
            过滤 
            监听
            生命周期
         -->
         <!-- | 管道符 后面跟过滤器（自定义的函数） -->
         <div>{{price | disCount(50) | myCur("￥")}}</div>
         <!-- 
          -->
          <el-input v-model="obj.name"></el-input>
          <div>
            {{oldval}}
          </div>
          <div>
            {{newval}}
          </div>
    </div>
</template>
<script>
export default {
    name:"App",
    data(){
        return {
            name:"",
            price:"999",
            oldval:"",
            newval:"",
            obj:{
                name:""
            }
        }
    },
    // 监听器
    watch:{
        // 监听的属性key名字（新值 ，老值）{进行处理}
        // obj(newval , oldval){
        //         let _self = this;
        //         console.log(oldval)
        //         console.log(newval)
        //         // console.log(_self)
        //         _self.oldval = oldval;
        //         _self.newval = newval;
        // }
        // 监听能监听到当前Vue文件的所有值
        // 一旦监听的是一个引用数据类型普通的监听没法监听到需要（深度监听）
        obj:{
            deep:true,//是否开启深度监听
            handler:function(newval){//监听到了变化后的函数
                console.log(newval)//深度监听只能监听新数据
            }
        }
    },
    // 过滤器
    filters:{
        disCount(a , b){
            // console.log(a)
            // console.log(b)
            // 过滤后的结果需要return出来
            return a*b
        },
        myCur(a,b){
            // console.log(a)
            // console.log(b)
        }
    },
    // 生命周期函数在任何.Vue文件都可以使用
    // 我们称之为Vue钩子函数 
    // 生命周期函数和data同级
    beforeCreate(){
        let _self = this;
        console.log(_self.$el);//页面的DOM
        console.log(_self.$data)//data里面的数据
        // document.getElementById
        // document.getElementsByClassName
        // document.getElementsByTagName
        // document.createDocumentFragment() 虚拟DOM碎片集合对象
        // 拿不到数据 拿不到DOM 
        // 我们如果页面渲染的数据比较多可以在这里进行loading动画
        // 一般来说beforeCreate我们不用 因为他必须是要进入这个vue页面
        // 我们喜欢用路由守卫来代替这个loading的行为
        
    },
    created(){
        let _self = this;
        console.log(_self.$el);
        console.log(_self.$data);//拿到data了数据
        // 该页面需要获取到字典数据可以在created先调用请求 节省了请求和渲染的时间
        // 有些接口不需要展示在页面当中但是我们需要请求 
        // 如果将死数据如果采用JSON文件的放入项目中 我们也在created中请求过来

    },
    beforeMount(){
        let _self = this;
        console.log(_self.$el);
        console.log(_self.$data);
        // 当beforeMount执行完了之后DOM就立马渲染了
        // 为了DOM的显示进行准备工作
        // 通过JS原生获取到视口层的宽高 鼠标的位置 或者判断当前的设备是PC还是移动端
    },
    mounted(){
        let _self= this;
        console.log(_self.$el)
        console.log(_self.$data);
        // 初始化页面执行JS什么都能写在这里
    },
    // 更新前
    beforeupdate(){

    },
    // 更新后
    updated(){

    },
    // 销毁前
    deforeDestory(){

    },
    // 销毁后
    destoryed(){

    }
}
</script>